<template>
  <div class="container">
    <div class="headinfo-wrap">
      <div class="main-img" :style="{backgroundImage: `url(${person.pics[0]})`}"></div>
      <div class="info-wrap">
        <div class="num-wrap">
          <div class="info-num">{{person.id}}</div>
        </div>
        <div class="info-name overflow-txt">{{person.nickname}}</div>
        <div class="info-city">{{person.city}}</div>
        <button class="clear-btn gradient-btn sm-btn" @click="vote">投一票</button>
      </div>
    </div>
    <div class="count-wrap count-position">
      <div class="count-item">
        <p class="count-num">{{person.vote_count}}</p>
        <p class="count-txt">当前票数</p>
      </div>
      <div class="count-item">
        <p class="count-num">{{person.rank}}</p>
        <p class="count-txt">当前名次</p>
      </div>
      <div class="count-item">
        <p class="count-num">{{person.interval}}</p>
        <p class="count-txt">距离上一名次</p>
      </div>
    </div>
    <div class="detail-wrap">
      <p class="detail-title">TA和TA的场馆：</p>
      <p class="detail-content">{{person.sign}}</p>
      <div class="nav-switch">
        <div class="nav-item" v-for="(item, index) of list" :class="[curindex == index ? 'nav-active' : '']" @click="navSwitch(index)">{{item}}</div>
      </div>
      <div class="pic-wrap">
        <img class="pic-item" v-for="(item,index) in person.pics" :key="index" v-bind:src="item" v-show="curindex == 0"/>
        <img class="pic-item" v-for="(clubitem,clubindex) in person.clubpics" :key="clubindex" v-bind:src="clubitem" v-show="curindex == 1"/>
      </div>
    </div>
    <transition name="fade">
      <div class="pop-wrap" v-show="popShow" transition="fade" @click="hidePop">
        <div class="pop-content">
          <img class="success-img" src="http://piccdn.50yoga.cn/pics/public/sweet/images/shopkeeper/success.png" width="80" height="80">
          <p class="pop-title">投票成功</p>
          <p>感谢您的支持～</p>
          <button class="clear-btn gradient-btn vote-btn" @click="hidePop">确定</button>
        </div>
      </div>
    </transition>
    <transition name="fade">
      <div class="pop-wrap" v-show="sharePop" transition="fade" @click="hidePop">
        <img src="http://piccdn.50yoga.cn/pics/public/sweet/images/shopkeeper/share.png" class="share-pop">
      </div>
    </transition>
  </div>
</template>

<script>
import { get, post } from '../../common/request'

export default {
  name: 'keeperDetail',
  data () {
    return {
      person: {
        pics: [],
        clubPics: []
      },
      list: ['生活照', 'TA的场馆'],
      curindex: 0,
      id: '',
      popShow: false,
      sharePop: true
    }
  },
  methods: {
    navSwitch (index) {
      this.curindex = index
    },
    hidePop () {
      this.popShow = false
      this.sharePop = false
    },
    vote () {
      post(`/api/shield/vote/vote`, {
        openid: localStorage.openid,
        obj_id: this.id
      })
    }
  },
  created () {
    this.sharePop = true
    this.id = this.$route.params.id
    if (this.$route.params.id) {
      get(`/api/shield/vote/show/${this.$route.params.id}`, {
        openid: localStorage.openid
      }).then(response => {
        this.person = response.data
      })
    } else {
      get(`/api/shield/vote/show`, {
        openid: localStorage.openid
      }).then(response => {
        this.person = response.data
      })
    }
  }
}
</script>

<style scoped lang="stylus">
$keeperColor = #f06774;
$borderRadius = 0.3125rem;

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  color: $blackColor;

  .headinfo-wrap {
    width: 100%;

    .main-img {
      width: 100%;
      height: 13.125rem;
      background-color: #ccc;
      background-size: cover;
    }

    .info-wrap {
      display: flex;
      align-items: center;
      margin-top: -0.3125rem;

      .num-wrap {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0.625rem;

        .info-num {
          width: 3.25rem;
          height: 3.25rem;
          line-height: 3.25rem;
          border-radius: 50%;
          background-color: $keeperColor;
          color: #fff;
          font-size: 1.2rem;
          font-weight: bold;
          text-align: center;
        }
      }

      .info-name {
        font-size: 1.25rem;
        margin: 0 0.625rem 0 0.3125rem;
        max-width:10rem;
      }

      .info-city {
        font-size: 0.875rem;
      }

      .sm-btn {
        position: absolute;
        right: 0.625rem;
        padding 0 0.5rem;
      }
    }
  }

  .count-position {
    margin: 1.875rem 0;
  }

  .detail-wrap {
    width: 94.67%;
    align-self: center;

    .detail-title {
      font-size: 1rem;
      padding-bottom: 0.625rem;
    }

    .detail-content {
      font-size: 0.8125rem;
      line-height: 1.5;
      padding-bottom: 1.25rem;
    }

    .nav-switch {
      width: 100%;
      height: 2.1875rem;
      border: 1px solid $keeperColor;
      box-sizing: border-box;
      border-radius: $borderRadius;
      display: flex;
      margin-bottom: 1.25rem;

      .nav-item {
        flex: 1;
        color: $keeperColor;
        line-height: 2.1875rem;
        text-align: center;
      }

      .nav-item:first-child {
        border-right: 1px solid $keeperColor;
        box-sizing: border-box;
      }

      .nav-active {
        color: #fff;
        background: $keeperColor;
      }
    }

    .pic-wrap {
      .pic-item {
        width: 100%;
        border-radius: $borderRadius;
        margin: 0.625rem 0;
        background-color: #ccc;
      }
    }
  }

  .share-pop {
    position: absolute;
    width: 15rem;
    right: 0;
    top: 0;
  }
}
</style>
